<template>
  <div
    class="main-table"
    :style="{ height: height.includes('%') ? height : height + 'px' }"
  >
    <!-- 表格内容 -->
    <div :class="{ 'table-con-hasPage': hasPage, 'table-con': !hasPage }">
      <vxe-table
        ref="zzTable"
        :data="data"
        :empty-text="emptyText"
        :loading="loading"
        height="auto"
        :size="size"
        border="none"
        :stripe="stripe"
        :align="align"
        :header-align="headerAlign"
        :checkbox-config="checkboxConfig"
        :tree-config="treeConfig"
      >
        <slot></slot>
      </vxe-table>
    </div>
    <!-- 表格分页 -->
    <div v-if="hasPage" class="page-right">
      <vxe-pager
        v-model:current-page="tablePage.pageNum"
        v-model:page-size="tablePage.pageSize"
        :total="tablePage.total"
        :pager-count="pagerCount"
        @page-change="handlePageChange"
        :layouts="[
          'Sizes',
          'PrevJump',
          'PrevPage',
          'Number',
          'NextPage',
          'NextJump',
          'FullJump',
          'Total',
        ]"
      >
        >
      </vxe-pager>
    </div>
  </div>
</template>

<script>
export default {
  name: 'zzTable',
  emits: ['page-change'],
  props: {
    data: {
      type: Array,
      required: true,
    },
    emptyText: {
      type: String,
      default: '暂无数据',
    },
    size: {
      type: String,
      default: 'small',
    },
    loading: {
      type: Boolean,
    },
    stripe: {
      type: Boolean,
      default: true,
    },
    align: {
      type: String,
      default: 'left',
    },
    headerAlign: {
      type: String,
      default: 'left',
    },
    height: {
      type: String,
      default: '100%',
    },
    hasPage: {
      type: Boolean,
      default: true,
    },
    pagerCount: {
      type: Number,
      default: 7,
    },
    page: {
      type: Object,
    },
    checkboxConfig: {
      type: Object,
    },
    treeConfig: {
      type: Object,
    },
  },
  computed: {
    tablePage() {
      return this.page
    },
  },
  methods: {
    zzTableRef() {
      return this.$refs.zzTable
    },
    handlePageChange(page) {
      this.$emit('page-change', page)
    },
    // 获取选中项
    getCheckboxRecords() {
      return this.$refs.zzTable.getCheckboxRecords()
    },
    getTableColumn() {
      return this.$refs.zzTable.getTableColumn()
    },
  },
}
</script>

<style lang="less" scoped>
.main-table {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .table-con {
    height: 100%;
  }

  .table-con-hasPage {
    height: calc(100% - 3px);
  }

  .table-page {
    display: flex;
    background-color: #fff;

    .page-right {
      height: 100%;
    }

    .vxe-pager.size--small {
      height: 100%;
    }
  }
}
</style>
